<template>
  <a-space direction="vertical" :size="16" fill>
    <a-card
      class="general-card"
      title="数据总览"
      :header-style="{ paddingBottom: '12px' }"
    >
      <!-- <template #extra>
        <a-link>新增车间</a-link>
      </template> -->
      <a-grid :cols="24" :col-gap="12" :row-gap="12">
        <a-grid-item
          :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 }"
        >
          <a-table
            :columns="columns"
            :data="dataInfoList"
            stripe
            sticky-header
            show-empty-tree
            :scroll="scroll"
          >
            <template #email="{ record }">
              <a-button
                v-if="!record.recordID"
                type="text"
                @click="addInfo(record)"
                >{{ getDataInfoText(record) }}</a-button
              >
            </template>
          </a-table>
        </a-grid-item>
      </a-grid>
    </a-card>
  </a-space>
  <InfoDialog ref="infoDialog" :getWorkshop="getWorkshop" />
</template>

<script lang="ts" setup>
import { defineProps, ref } from 'vue';
import ChainItem from './chain-item.vue';
import InfoDialog from './infoDialog.vue';
const props = defineProps({
  dataInfoList: {
    type: Array,
  },
  getWorkshop: {
    type: Function,
  },
});
const scroll = {
  x: 600,
};
const infoDialog = ref('');
const columns = [
  {
    title: '车间',
    dataIndex: 'name',
    fixed: 'left',

  },
  {
    title: '总分组(组)',
    dataIndex: 'group',
  },
  {
    title: '品温个数(个)',
    dataIndex: 'temp',
  },
  { title: '操作', dataIndex: 'email', slotName: 'email' },
];
// 文字转换
const getDataInfoText = (record: any) => {
  if (record.group_id) {
    return '新增品温';
  }
  return '新增分组';
};
// 新增数据
const addInfo = (record: any) => {
  infoDialog.value.openModal(record);
};
</script>

<style scoped lang="less"></style>
